<template>
  <div>
    <br />
    <div style="color: blueviolet">{{ path }}</div>
    <br />
    <EditorVue class="elTextA" :value="value" @input="saveContent = $event">
    </EditorVue>
    <br />
    <el-button type="primary" @click="confirmFlag = true">
      保存&更新
    </el-button>
    <el-button type="primary" @click="watchDataHandle"> 查看数据 </el-button>
    <!-- 弹框 -->
    <el-dialog
      title="更新内容"
      :visible.sync="confirmFlag"
      width="30%"
      center
      modal-append-to-body
      :append-to-body="true"
    >
      <span>确定更新内容</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmFlag = false">取 消</el-button>
        <el-button type="primary" @click="putRequestHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorVue from "./EditerVue/index.vue";
import { message as elMessage } from "element-ui";
import { updateFileRaw } from "../apis/file";
export default {
  props: ["value", "path", "sha"],
  data() {
    return {
      confirmFlag: false,
      // saveContent
      saveContent: "",
    };
  },
  components: { EditorVue },
  mounted() {
    console.log(this.path);
  },
  methods: {
    /*更新请求 */
    async putRequestHandle() {
      // console.debug(this.value, "value");
      // console.debug(this.path, "path");
      // console.debug(this.sha, "sha");
      try {
        const { data, message } = await updateFileRaw(
          this.saveContent,
          "auto",
          this.sha,
          this.path,
          "更新了"
        );
        console.log(data, "结果");
        console.log(message, "信息");
        if (message == "更新了" || message == "更新成功") {
          this.confirmFlag = false;
          location.reload();
        } else {
          alert(message);
        }
      } catch (error) {
        console.error(error, "请求出错");
        return;
      }
    },
    watchDataHandle() {
      console.log(this.$props.value, "数据");
      window.aaa = this.$props.value;
    },
  },
};
</script>

<style scoped>
.elTextA {
  color: red;
  height: calc(100vh - 190px);
  .CodeMirror {
    height: 100%;
  }
}
</style>
